<template>
    <div class="bigBox">
        <div class="top">
            <p>&lt;</p>
            <p>{{ course.navTitle }}</p>
        </div>
        <div class="myCourseBox">
            <div v-for="item in courseList" class="myCourse">
                <img :src="item.img" alt="">
                <div class="myCourseText">
                    <p class="courseP1">{{ item.name }}</p>
                    <p class="courseP2">有效期：{{ item.time }}</p>
                    <div class="myCourseText1">
                        <p class="courseP3"></p>
                        <p class="courseP4">开始学习</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import '../../public/flexible.js'
import { inject, ref, onMounted, } from 'vue';
import axios from '../utils/http.js';
const $axios = inject('$axios');
const course = ref({})
const courseList = ref([])
onMounted(() => {
    // 使用 axios 获取本地 JSON 文件数据
    $axios.get('../public/data.json').then(res => {
        course.value = res.course
        courseList.value = res.course.list
        console.log(course)
    }).catch(error => {
        console.error('Error fetching data:', error);
    });
});
</script>
<style>
@import url('../style/MyCourses.css');
</style>